<template>
	<div class="wrap">
		<el-form
			ref="forms"
			size="small"
			:model="forms"
			:rules="rules"
			label-position="right"
			label-width="120px"
			class="custom-form"
		>
			<el-card shadow="never" :border="false">
				<div slot="header" class="info-tlt">{{ $route.meta.title }}</div>
				<el-form-item label="标题：" prop="ques_title">
					<el-input
						v-model="forms.ques_title"
						placeholder="请输入标题"
						clearable
						type="textarea"
						resize="none"
						:autosize="{ minRows: 3, maxRows: 3 }"
						maxlength="50"
						show-word-limit
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="英文标题：" prop="ques_title_en">
					<el-input
						v-model="forms.ques_title_en"
						placeholder="请输入标题"
						clearable
						type="textarea"
						resize="none"
						:autosize="{ minRows: 3, maxRows: 3 }"
						maxlength="50"
						show-word-limit
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="题目类型：" prop="ques_type">
					<el-radio-group v-model="forms.ques_type">
						<el-radio :label="0">单选</el-radio>
						<el-radio :label="1">多选</el-radio>
					</el-radio-group>
				</el-form-item>
				<template v-for="key in letterList">
					<el-form-item
						:label="`中文选项${key.toUpperCase()}：`"
						:prop="'option_' + key"
						:key="key"
					>
						<el-input
							v-model="forms['option_' + key]"
							placeholder="请输入"
							clearable
							type="text"
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item
						:label="`英文选项${key.toUpperCase()}：`"
						:prop="'option_' + key + '_en'"
						:key="key + 'en'"
					>
						<el-input
							v-model="forms['option_' + key + '_en']"
							placeholder="请输入"
							clearable
							type="text"
							style="width: 100%"
						/>
					</el-form-item>
				</template>
				<el-form-item
					label="正确答案："
					prop="correct_answer"
					v-if="forms.ques_type === 0"
					key="radio"
				>
					<el-radio-group v-model="forms.correct_answer">
						<el-radio :label="key" v-for="key in answerList" :key="key">{{ key }}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="正确答案：" prop="checkList" v-else key="checkList">
					<el-checkbox-group v-model="forms.checkList">
						<el-checkbox :label="key" v-for="key in answerList" :key="key">{{ key }}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="答案解析：" prop="answer_analysis" key="editor">
					<div class="section-content" style="min-height: 100px; width: 100%">
						<Editor
							ref="editor"
							v-model="forms.answer_analysis"
							@input="richInput($event, 'answer_analysis')"
						/>
					</div>
				</el-form-item>
				<el-form-item label="英文答案解析：" prop="answer_analysis_en" key="editorEn">
					<div class="section-content" style="min-height: 100px; width: 100%">
						<Editor
							ref="editor"
							v-model="forms.answer_analysis_en"
							@input="richInput($event, 'answer_analysis_en')"
						/>
					</div>
				</el-form-item>
				<el-form-item label="是否禁用：" prop="is_close">
					<el-radio-group v-model="forms.is_close">
						<el-radio :label="0">否</el-radio>
						<el-radio :label="1">是</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-card>
		</el-form>
		<el-row type="flex" justify="center" style="width: 100%; margin: 12px 0">
			<el-button size="small" style="margin-right: 5px; width: 70px" @click="$router.back()">
				返回
			</el-button>
			<el-button
				type="primary"
				size="small"
				@click="saveVideos"
				style="width: 100px"
				v-prevent-click="2000"
			>
				保存
			</el-button>
		</el-row>
	</div>
</template>
<script>
	import UploadImage from '@/components/UploadHttp/UploadImage.vue'
	import Editor from '@/components/Editor'
	import { uploadFunc } from '@/utils/upload.js'
	import { questionAdd, questionEdit, questionDetail } from '@/api/system.js'
	export default {
		name: 'CreateQuestion',
		components: { UploadImage, Editor },
		data() {
			return {
				disabled: false,
				forms: {
					ques_title: '',
					ques_title_en: '',
					ques_type: 0,
					answer_analysis: '',
					option_a: '',
					option_b: '',
					option_c: '',
					option_d: '',
					option_e: '',
					option_f: '',
					option_a_en: '',
					option_b_en: '',
					option_c_en: '',
					option_d_en: '',
					option_e_en: '',
					option_f_en: '',
					correct_answer: '',
					answer_analysis_en: '',
					is_close: 0,
					checkList: []
				},
				rules: {
					ques_title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
					ques_title_en: [{ required: true, message: '请输入英文标题', trigger: 'blur' }],
					ques_type: [{ required: true, message: '请选择题目类型', trigger: 'change' }],
					answer_analysis: [{ required: true, message: '请输入答案解析', trigger: 'blur' }],
					answer_analysis_en: [{ required: true, message: '请输入英文答案解析', trigger: 'blur' }],
					option_a: [{ required: true, message: '请输入选项内容', trigger: 'blur' }],
					option_b: [{ required: true, message: '请输入选项内容', trigger: 'blur' }],
					correct_answer: [{ required: true, message: '请选择正确答案', trigger: 'change' }],
					checkList: [
						{
							type: 'array',
							required: true,
							message: '请选择一个或多个正确答案',
							trigger: 'change'
						}
					]
				},
				letterList: ['a', 'b', 'c', 'd', 'e', 'f']
			}
		},
		computed: {
			answerList() {
				return this.letterList
					.filter(key => !!this.forms['option_' + key])
					.map(key => key.toUpperCase())
			}
		},
		created() {
			const { id } = this.$route.query
			document.title = this.$route.meta.title = id ? '编辑题目' : '新增题目'
			if (id) {
				this.getDetailInfo(id)
			}
		},
		methods: {
			async getDetailInfo(ques_id) {
				const loading = this.$setLoading()
				try {
					const { data } = await questionDetail({ ques_id })
					data.checkList = data.ques_type === 1 ? data.correct_answer.split(',') : []
					this.forms = data
					this.$forceUpdate()
					loading.close()
				} catch (e) {
					loading.close()
					console.log(e)
				}
			},
			async saveVideos() {
				if (
					(this.forms.ques_type === 0) &
					!this.forms['option_' + this.forms.correct_answer.toLowerCase()]
				) {
					this.forms.correct_answer = ''
				} else if (this.forms.ques_type === 1) {
					this.forms.checkList = this.forms.checkList.filter(
						key => !!this.forms['option_' + key.toLowerCase()]
					)
				}
				this.$refs.forms.validate(async valid => {
					if (valid) {
						for (let i = 0; i < this.letterList.length; i++) {
							const key = this.letterList[i]
							if (
								(!!this.forms['option_' + key] && !this.forms['option_' + key + '_en']) ||
								(!this.forms['option_' + key] && !!this.forms['option_' + key + '_en'])
							) {
								this.$message.error('中英文选项内容应同时存在！')
								return
							}
						}
						const loading = this.$setLoading({
							lock: true,
							text: '数据提交中~'
						})
						const { checkList, ...params } = this.forms
						// 多选
						if (params.ques_type === 1) {
							params.correct_answer = checkList.join(',')
						}
						const func = params.ques_id ? questionEdit(params) : questionAdd(params)
						Promise.all([func])
							.then(res => {
								this.$message.success(`提交成功！`)
								this.$router.back()
							})
							.finally(() => loading.close())
					}
				})
			},
			richInput(val, valueName) {
				if (val) {
					this.$refs.forms.clearValidate([valueName])
				} else {
					this.$refs.forms.validateField([valueName])
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		.info-tlt {
			line-height: 20px;

			&:before {
				content: '';
				float: left;
				width: 4px;
				height: 18px;
				background-color: #37a6e5;
				margin-right: 10px;
			}
		}

		::v-deep {
			.custom-form .el-card__body {
				width: 900px;
				margin: 0 auto;
			}

			.form-table .el-form-item__content {
				line-height: 0;
			}

			.el-form-item__content {
				min-height: auto;
			}

			.el-form .el-form-item {
				margin-bottom: 18px;
			}

			.el-radio-group {
				margin-top: 8px;
			}

			.upload-demo .el-upload {
				overflow: hidden;
			}

			.el-upload__tip {
				margin: 0;
			}

			.picBox,
			.upload-img {
				width: 347px !important;
				height: 143px !important;
				line-height: 143px !important;
			}
		}
	}
</style>
